<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeLand 接口 shppath 测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h3 {
            color: #555;
            margin-top: 0;
        }
        input[type="text"] {
            width: 70%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
        }
        .info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            padding: 15px;
            border-radius: 4px;
            margin-top: 10px;
        }
        .json-display {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
            white-space: pre-wrap;
            border: 1px solid #dee2e6;
            max-height: 300px;
            overflow-y: auto;
        }
        .field-highlight {
            background-color: #fff3cd;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        .download-btn {
            background-color: #28a745;
            margin-top: 10px;
        }
        .download-btn:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>NodeLand 接口 shppath 字段测试</h1>
        
        <div class="section">
            <h3>SQL 查询修改说明</h3>
            <div class="info">
                <strong>修改内容：</strong><br>
                1. 添加了 <span class="field-highlight">tgd.shppath as "shppath"</span> 字段<br>
                2. 增加了 <span class="field-highlight">LEFT JOIN t_geom_db tgd ON nl.geom_db_id = tgd.id</span> 关联<br>
                3. 在 GROUP BY 中添加了 <span class="field-highlight">tgd.shppath</span><br><br>
                
                <strong>现在返回的字段：</strong><br>
                • geomDbId - 几何数据库ID<br>
                • <span class="field-highlight">shppath - SHP文件路径（新增）</span><br>
                • geoms - 几何数据数组<br>
                • envelope - 外边框<br>
                • centroid - 中心点
            </div>
        </div>

        <div class="section">
            <h3>接口测试</h3>
            <p>测试 /nodeland/geom/{nodeId} 接口是否正确返回 shppath 字段</p>
            <input type="text" id="nodeId" placeholder="输入 nodeId，如：test-node-001">
            <button onclick="testNodeLandGeom()">测试正式接口</button>
            <button onclick="fillExampleNodeId()">填入示例ID</button>
            <div id="testResult" style="display:none;"></div>
        </div>

        <div class="section">
            <h3>调试工具</h3>
            <p>分步调试，查看每一层的数据返回情况</p>
            <input type="text" id="debugNodeId" placeholder="输入 nodeId 进行调试">
            <button onclick="testMapper()">1. 测试 Mapper 层</button>
            <button onclick="testService()">2. 测试 Service 层</button>
            <button onclick="checkAllData()">3. 完整检查</button>
            <div id="debugResult" style="display:none;"></div>
        </div>

        <div class="section">
            <h3>返回数据结构</h3>
            <div class="info">
                <strong>期望的返回格式：</strong>
                <div class="json-display">{
  "code": 200,
  "msg": "操作成功",
  "data": {
    "geomDbId": "uuid-string",
    "shppath": "/home/siwei/uploadPath/2025/08/01/文件_20250801154318A001.zip",
    "geoms": ["SRID=4326;POLYGON(...)", "SRID=4326;POLYGON(...)"],
    "envelope": "SRID=4326;POLYGON(...)",
    "centroid": "SRID=4326;POINT(...)"
  }
}</div>
            </div>
        </div>
    </div>

    <script>
        function testNodeLandGeom() {
            const nodeId = document.getElementById('nodeId').value.trim();
            const resultDiv = document.getElementById('testResult');
            
            if (!nodeId) {
                alert('请输入 nodeId');
                return;
            }

            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<div class="info">正在请求接口...</div>';

            // 根据实际的服务端口调整URL
            const url = `http://127.0.0.1:9201/nodeland/geom/${nodeId}`;
            
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        const result = data.data;
                        
                        // 检查是否包含 shppath 字段
                        const hasShppath = result && result.shppath !== undefined;
                        const shppathValue = result ? result.shppath : null;
                        
                        let resultHtml = `
                            <div class="${hasShppath ? 'result' : 'error'}">
                                <strong>${hasShppath ? '✅' : '❌'} 接口返回${hasShppath ? '成功' : '失败'}！</strong><br><br>
                                
                                <strong>字段检查：</strong><br>
                                • geomDbId: ${result?.geomDbId ? '✅ 存在' : '❌ 缺失'}<br>
                                • shppath: ${hasShppath ? '✅ 存在' : '❌ 缺失'}<br>
                                • geoms: ${result?.geoms ? '✅ 存在' : '❌ 缺失'}<br>
                                • envelope: ${result?.envelope ? '✅ 存在' : '❌ 缺失'}<br>
                                • centroid: ${result?.centroid ? '✅ 存在' : '❌ 缺失'}<br><br>
                        `;
                        
                        if (hasShppath && shppathValue) {
                            resultHtml += `
                                <strong>shppath 值：</strong><br>
                                <div class="json-display">${shppathValue}</div>
                                
                                <strong>文件下载测试：</strong><br>
                                <button class="download-btn" onclick="testFileDownload('${shppathValue}')">测试文件下载</button>
                                <button class="download-btn" onclick="window.open('http://127.0.0.1:9202${shppathValue}', '_blank')">直接下载</button><br><br>
                            `;
                        }
                        
                        resultHtml += `
                                <strong>完整返回数据：</strong><br>
                                <div class="json-display">${JSON.stringify(data, null, 2)}</div>
                            </div>
                        `;
                        
                        resultDiv.innerHTML = resultHtml;
                    } else {
                        resultDiv.innerHTML = `
                            <div class="error">
                                <strong>❌ 接口调用失败</strong><br>
                                错误码：${data.code}<br>
                                错误信息：${data.msg}<br><br>
                                <strong>完整响应：</strong><br>
                                <div class="json-display">${JSON.stringify(data, null, 2)}</div>
                            </div>
                        `;
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    resultDiv.innerHTML = `
                        <div class="error">
                            <strong>❌ 请求异常</strong><br>
                            错误信息：${error.message}<br><br>
                            <strong>可能的原因：</strong><br>
                            • 服务未启动（检查端口 9201）<br>
                            • 网络连接问题<br>
                            • 跨域问题<br>
                            • nodeId 不存在
                        </div>
                    `;
                });
        }

        function testFileDownload(shppath) {
            if (!shppath) {
                alert('shppath 为空');
                return;
            }
            
            const downloadUrl = `http://127.0.0.1:9202${shppath}`;
            
            // 测试文件是否可访问
            fetch(downloadUrl, { method: 'HEAD' })
                .then(response => {
                    if (response.ok) {
                        alert(`✅ 文件可访问！\n状态码: ${response.status}\n即将打开下载链接`);
                        window.open(downloadUrl, '_blank');
                    } else {
                        alert(`❌ 文件不可访问\n状态码: ${response.status}\n请检查文件是否存在`);
                    }
                })
                .catch(error => {
                    alert(`❌ 文件访问测试失败\n错误: ${error.message}`);
                });
        }

        function fillExampleNodeId() {
            document.getElementById('nodeId').value = 'test-node-001';
            document.getElementById('debugNodeId').value = 'test-node-001';
        }

        // 调试功能
        function testMapper() {
            const nodeId = document.getElementById('debugNodeId').value.trim();
            if (!nodeId) {
                alert('请输入 nodeId');
                return;
            }

            debugRequest(`http://127.0.0.1:9201/debug/nodeland/mapper/${nodeId}`, 'Mapper 层测试');
        }

        function testService() {
            const nodeId = document.getElementById('debugNodeId').value.trim();
            if (!nodeId) {
                alert('请输入 nodeId');
                return;
            }

            debugRequest(`http://127.0.0.1:9201/debug/nodeland/service/${nodeId}`, 'Service 层测试');
        }

        function checkAllData() {
            const nodeId = document.getElementById('debugNodeId').value.trim();
            if (!nodeId) {
                alert('请输入 nodeId');
                return;
            }

            debugRequest(`http://127.0.0.1:9201/debug/nodeland/check/${nodeId}`, '完整数据检查');
        }

        function debugRequest(url, title) {
            const resultDiv = document.getElementById('debugResult');
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = `<div class="info">正在执行 ${title}...</div>`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    let resultHtml = `<div class="${data.code === 200 ? 'result' : 'error'}">`;
                    resultHtml += `<strong>${title} 结果：</strong><br>`;
                    resultHtml += `状态码：${data.code}<br>`;
                    resultHtml += `消息：${data.msg}<br><br>`;

                    if (data.code === 200 && data.data) {
                        resultHtml += `<strong>返回数据分析：</strong><br>`;

                        if (title.includes('Mapper')) {
                            const hasShppath = data.data.shppath !== undefined;
                            resultHtml += `• shppath 字段：${hasShppath ? '✅ 存在' : '❌ 不存在'}<br>`;
                            if (hasShppath) {
                                resultHtml += `• shppath 值：${data.data.shppath || '(空值)'}<br>`;
                            }
                        } else if (title.includes('Service')) {
                            const hasShppath = data.data.shppath !== undefined;
                            resultHtml += `• shppath 字段：${hasShppath ? '✅ 存在' : '❌ 不存在'}<br>`;
                            if (hasShppath) {
                                resultHtml += `• shppath 值：${data.data.shppath || '(空值)'}<br>`;
                            }
                        } else if (title.includes('完整')) {
                            resultHtml += `• Mapper 有 shppath：${data.data.mapperHasShppath ? '✅' : '❌'}<br>`;
                            resultHtml += `• Service 有 shppath：${data.data.serviceHasShppath ? '✅' : '❌'}<br>`;
                            resultHtml += `• shppath 实际值：${data.data.shppathValue || '(空值)'}<br>`;
                        }
                    }

                    resultHtml += `<br><strong>完整响应数据：</strong><br>`;
                    resultHtml += `<div class="json-display">${JSON.stringify(data, null, 2)}</div>`;
                    resultHtml += `</div>`;

                    resultDiv.innerHTML = resultHtml;
                })
                .catch(error => {
                    resultDiv.innerHTML = `
                        <div class="error">
                            <strong>❌ ${title} 请求失败</strong><br>
                            错误：${error.message}
                        </div>
                    `;
                });
        }
    </script>
</body>
</html>
